<template>
	<div class="my-loading-rd">
        <div class="loadingbox" v-show="show">
            <div class="loadecenter">
                <div class="loadrgb" :style="{top: top}">
                    <div class="loadcontent">
                        <div class="spinner1 spinnerMax">
                          <div class="spinner1 spinnerMid">
                            <div class="spinner1 spinnerMin"></div>
                          </div>
                        </div>
                      </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.loadcontent {
  align-items: center;
  background: #eeeeee;
  border-radius: 50%;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  display: flex;
  display: -webkit-flex;
  height: 100px;
  justify-content: center;
  -webkit-justify-content: center;
  width: 100px;
}

/* Spinner 1 starts here */
.spinner1 {
  align-items: center;
  -webkit-align-items: center;
  border: 3px solid transparent;
  border-top: 3px solid #4DB6AC;
  border-right: 3px solid #4DB6AC;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  display: -webkit-flex;
  -webkit-justify-content: center;
}

.spinnerMax {
  animation: spinnerOne 2s linear infinite;
  height: 40px;
  width: 40px;
}

.spinnerMid {
  animation: spinnerOne 4s linear infinite;
  height: 34px;
  width: 34px;
}

.spinnerMin {
  animation: spinnerOne 4s linear infinite;
  height:28px;
  width: 28px;
}

@keyframes spinnerOne {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}
</style>

<script>
	export default{
		name:'my-loading',
        props: {
            show: Boolean, 
            top:{
                type: String,
                default: '30%'
            }
        },
        watch:{
            show(val){
                this.$emit('update:show',val)
            },
        },
	}

</script>